import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchHomeMultidataAction } from '../store/home'

export class Home extends PureComponent {
  componentDidMount() {
    this.props.fetchHomeMultidata()
  }
  
  render() {
    const { banners, recommends } = this.props
    console.log(banners?.[0], recommends[0]);
    
    return (
      <div>
        <h3>Home banner</h3>
        <ul>
          {
            banners.map((item) => {
              return (
                <li key={item.acm}>{item.title}</li>
              )
            })
          }
        </ul>
        <h3>Home recommends</h3>
        <ul>
          {
            recommends.map((item) => {
              return (
                <li key={item.acm}>{item.title}</li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  banners: state.home.banners,
  recommends: state.home.recommends
})

const mapDispatchToProps = (dispatch) => ({
  fetchHomeMultidata() {
    dispatch(fetchHomeMultidataAction())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)
